<template>
  <mt-popup
    v-model="popupVisible"
    position="center">
    <div class="vm-examine-process">
      <swiper
        :options="swiperOption"
        ref="swiper">
        <swiper-slide  v-for="(list, key) in commonExamineProcess" :key="key">
          <div class="vm-examine-process-item">
            <div class="vm-process-h">
              <h5>审批编号：{{ list.code }}</h5>
              <x-icon type="ios-close-empty" size="30" @click="popupVisible = !popupVisible;"></x-icon>
            </div>
            <div class="vm-process-b"  v-for="(item, key) in list.data" :key="key">
              <div class="vm-process-item">
                <div class="vm-process-item-l">
                  <div class="line"></div>
                  <span :class="['vm-process-l-name', {'n':item.opinion == null}]">
                      {{ item.user_text }}
                  </span>
                </div>
                <div class="vm-process-item-r">
                  <div class="vm-process-r-t" v-if="item.opinion == 1">
                    <span v-if="item.status">同意</span>
                    <span v-else>未审批</span>
                    <span>{{ item.created_time }}</span>
                  </div>
                  <div class="vm-process-r-t" v-else>
                    <span v-if="item.status">不同意</span>
                  </div>
                  <p class="vm-process-r-b">{{ item.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide style="opacity: 0;" v-if="commonExamineProcess.length != 1"></swiper-slide>
      </swiper>
    </div>
  </mt-popup>
</template>

<script>
import { VmCommonExamineProcess } from '@/utils/vm-common-work_bench.js'
export default {
  beforeCreate () {
    window.myVue = this;
  },
  data () {
    return {
      popupVisible: false,
      swiperOption: {
        slidesPerView: 'auto',
        spaceBetween: 30,
        on: {
          slideChange() {
            if (this.activeIndex >= window.myVue.commonExamineProcess.length-1) {
              this.allowSlideNext = false;
            } else {
              this.allowSlideNext = true;
            }
          }
        }
      },
      commonExamineProcess: new Array()
    }
  },
  methods: {
    init (item, key, config) {
      new VmCommonExamineProcess(item, key, this, config);
    },
    closePopup (flag) {
      this.$emit('close', flag);
    }
  },
  watch: {
    popupVisible (newV) {
      if (!newV) {
        this.$emit('close', newV);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.vm-examine-process {
  height: 800px;
  .vm-examine-process-item {
    display: flex;
    flex-direction: column;
    margin: 40px 30px 0 30px;
    .vm-process-h {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h5 {
        font-size: 28px;
      }
    }
    .vm-process-b {
      margin-top: 40px;
      &:last-child {
        .line {
          display: none;
        }
      }
      .vm-process-item {
        position: relative;
        display: flex;
        .vm-process-item-l {
          width: 100px;
          margin-right: 30px;
          span.vm-process-l-name {
            &.n {
              background-color: #999999;
            }
            position: relative;
            z-index: 9999;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #d9261d;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28px;
            color: #fff;
          }
          div.line {
            position: absolute;
            width: 2px; /* no */
            background-color: #aaaaaa;
            left: 50px;
            height: calc( 100% + 40px );
          }
        }
        .vm-process-item-r {
          display: flex;
          flex-direction: column;
          flex: 1;
          .vm-process-r-t {
            display: flex;
            justify-content: space-between;
            span {
              &:last-child {
                color: #999;
                font-size: 18px;
              }
              &:first-child {
                color: #1ac6b1;
                font-size: 26px;
              }
            }
          }
          .vm-process-r-b {
            font-size: 22px;
            color: #333;
            display: flex;
            text-align: left;
          }
        }
      }
    }
  }
}
.mint-popup {
  width: 100%;
  margin-left: 30px;
  background: none;
}
.swiper-slide {
  overflow: scroll;
  border-radius: 15px;
  width: 75%;
  background-color: #fff;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
</style>
